﻿<div ng-controller="GovernanceIndicatorsDetailsController as ctrl">

    <div class="tabs-users-2">
        <ul>
            <li id="ribbon_{{$index}}" ng-repeat="template in ctrl.templates">
                <a href="" ng-click="ctrl.templateClick(template)" ng-class="{'active':ctrl.templateSelected.number===template.number}">{{ template.name }}</a>
            </li>
        </ul>
        <div class="clear"></div>
    </div>
    <br />
    <div id="topPanel">
        <div class="row-fluid">
            <div class="col-md-3">
                <div class="sidebar-table-left no-border" style="display: table-cell; vertical-align: middle; float: none;">
                    <div class="green-number-bubble">
                        {{ ctrl.selectCgOverallIssues.issue.score | number: 0 }}
                    </div>
                </div>
                <div class="sidebar-table-right no-border" style="display: table-cell; vertical-align: middle; float: none; width: 125px;">
                    <div class="title-black-border no-border">{{ctrl.selectCgOverallIssues.issue.name}}</div>
                </div>
                <div class="clear">&nbsp;</div>
            </div>

            <div class="col-md-3">
                <div class="sidebar-table-left no-border" style="display: table-cell; vertical-align: middle; float: none;">
                    <div class="green-number-bubble">
                        {{ctrl.selectCgOverallIssues.weight}}
                    </div>
                </div>
                <div class="sidebar-table-right no-border" style="display: table-cell; vertical-align: middle; float: none; width: 125px;">
                    <div class="title-black-border  no-border">{{ctrl.selectCgOverallIssues.issue.name}} Weight</div>
                </div>
                <div class="clear">&nbsp;</div>
            </div>


            <div class="col-md-3">
                <div class="sidebar-table-left no-border" style="display: table-cell; vertical-align: middle; float: none;">
                    <div class="green-number-bubble" style="font-size:26px; padding-top: 5px;background-color: #FEAE17">
                        {{ ctrl.selectCgOverallIssues.comparativeGroupRank }}
                        <div style="font-size: 18px; padding: 3px 0;">out of</div>
                        {{ ctrl.selectCgOverallIssues.comparativeGroupSize }}
                    </div>
                </div>
                <div class="sidebar-table-right no-border" style="display: table-cell; vertical-align: middle; float: none; width: 125px;">
                    <div class="title-black-border no-border">Relative position</div>
                </div>
                <div class="clear">&nbsp;</div>
            </div>


            <div class="col-md-3">
                <div class="sidebar-table-left no-border" style="display: table-cell; vertical-align: middle; float: none;">
                    <div class="green-number-bubble" style="background-color: #FEAE17">
                        {{ ctrl.selectCgOverallIssues.percentile }}<sup style="font-size: 11px; top: -14px;">{{ctrl.selectCgOverallIssues.regionalPercentileOrdinal}}</sup>
                    </div>
                </div>
                <div class="sidebar-table-right no-border" style="display: table-cell; vertical-align: middle; float: none; width: 125px;">
                    <div class="title-black-border no-border">Percentile</div>
                </div>
                <div class="clear">&nbsp;</div>
            </div>
        </div>
        
        <div class="clear" style="padding-bottom: 60px">&nbsp;</div>
        <div class="row-fluid" ng-if="ctrl.govProfile.companyGovernanceProfile.fullProfile">
            <div class="col-md-3">
                <div class="sidebar-table-left no-border">
                    <div class="trend-arow-large trend-arow-{{ ctrl.selectCgOverallIssues.issue.outlook }}"></div>
                </div>
                <div class="sidebar-table-right no-border" style="width: 125px;">
                    <div class="title-black-border">
                        Outlook
                    </div>
                    {{ ctrl.selectCgOverallIssues.issue.outlookAssesment }}
                </div>
            </div>

            <div class="col-md-9">
                <span ng-bind-html="ctrl.selectCgOverallIssues.issue.comment"></span>
            </div>
        </div>
        <div class="clear">&nbsp;</div>
    </div>

        <div>
            <div class="border-spacer">{{ctrl.templateSelected.name}} - Indicators</div>

            <div ng-repeat="datas in ctrl.issueIndicatorsData track by $index">

                <div id="{{datas.number}}">
                   
                    <div class="left-content">
                        <div class="sidebar-table-left no-border" style="display: table-cell; vertical-align: middle; float: none;">
                            <div class="green-number-bubble">
                                {{ datas.score | number: 0 }}
                            </div>
                        </div>
                        <div class="sidebar-table-right no-border" style="display: table-cell; vertical-align: middle; float: none;">
                            <div class="title-black-border no-border">{{datas.name}}</div>
                        </div>

                    </div>

                    <div class="right-content">
                        {{datas.standardText}}
                        <ul style="border-bottom: none;">
                            <li ng-repeat="tick in datas.tickBoxes">
                                {{tick}}
                            </li>
                        </ul>

                        <div ng-if=" datas.comments.length>0">
                            Note:
                            <span ng-repeat="comment in datas.comments">
                                <span ng-bind-html="comment"></span>
                            </span>
                        </div>

                    </div>
                    <div class="clear">&nbsp;</div>
                    <div class="border-spacer"></div>
                </div>

            </div>
        </div>

    

</div>
